export const tableColumns = context => {
  return [
    {
      prop: 'name',
      label: '标签名称',
      align: 'center',
      minWidth: 120
    },
    {
      label: '标签样式预览',
      minWidth: 120,
      render: (h, row) => {
        let _tag = ''
        styleOptions.map(item => {
          if (item.value === row.type) {
            _tag = (
              <span
                class={item.style}
              >
                {row.name}
              </span>
            )
          }
        })
        return _tag
      }
    },
    {
      button: true,
      label: '操作',
      fixed: 'right',
      width: 180,
      render: (h, row) => {
        let edit = (
          <a
            href="javascript:;"
            class="text-primary"
            onClick={() => context.operation('edit', row)}
          >
            编辑
          </a>
        )
        let del = (
          <a
            href="javascript:;"
            class="text-error"
            onClick={() => context.operation('del', row)}
          >
            删除
          </a>
        )
        return (
          <div>
            {edit}
            {del}
          </div>
        )
      }
    }
  ]
}

export const styleOptions = [
  {
    value: '1',
    name: '标签名称',
    style: 'vm plr15 tag-bgc-pink tag-pink fc-f lh30  bd-r15 tag-border-pink'
  },
  {
    value: '2',
    name: '标签名称',
    style: 'vm plr15 tag-bgc-yellow tag-yellow fc-f lh30 bd-r15 tag-border-yellow'
  },
  {
    value: '3',
    name: '标签名称',
    style: 'vm plr15 fc-f  lh30  bd-r15 tag-border-green tag-green'
  },
  {
    value: '4',
    name: '标签名称',
    style: ' plr15 fc-f  lh30 vm bd bd-r15 tag-border-blue tag-blue'
  }
]
